<template>
  <div class="detail-container">
    <div>
      <el-steps :space="200" :active="1" finish-status="success" align-center>
        <el-step title="提交订单"></el-step>
        <el-step title="支付订单"></el-step>
        <el-step title="平台发货"></el-step>
        <el-step title="确认收货"></el-step>
        <el-step title="完成评价"></el-step>
      </el-steps>
    </div>
    <div class="el-card is-never-shadow" style="margin-top: 15px; font-size: 14px">
      <div class="el-card__body">
        <div class="operate-container">
          <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
          <span class="color-danger">当前订单状态：已关闭</span>
          <div class="operate-button-container">
            <el-button size="mini">删除订单</el-button>
            <el-button size="mini">备注订单</el-button>
          </div>
        </div>
        <div style="margin-top: 20px">
          <i class="el-icon-s-claim"></i>
          <span>基本信息</span>
        </div>
        <div data-v-dbd3fea4="" class="table-layout">
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">订单编号</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">发货单流水号</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">用户账号</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">支付方式</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">订单来源</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">订单类型</div>
          </div>
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">{{ orderDetails.orderSn }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">
              <div v-if="orderDetails.deliverySn == ''">暂无</div>
              <div v-if="orderDetails.deliverySn == null">暂无</div>
              <div v-if="orderDetails.deliverySn == orderDetails.deliverySn">{{ orderDetails.deliverySn }}</div>
            </div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">{{ orderDetails.memberUsername }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">
              <div v-if="orderDetails.payType == 0">未支付</div>
              <div v-if="orderDetails.payType == 1">支付宝</div>
              <div v-if="orderDetails.payType == 2">微信</div>
            </div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">
              <div v-if="orderDetails.sourceType == 0">PC订单</div>
              <div v-if="orderDetails.sourceType == 1">APP订单</div>
            </div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">正常订单</div>
          </div>
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">配送方式</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">物流单号</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">自动确认收货时间</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">订单可得优币</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">订单可得成长值</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-4">活动信息</div>
          </div>
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">
              <div v-if="orderDetails.deliveryCompany == ''">暂无</div>
              <div v-if="orderDetails.deliveryCompany == null">暂无</div>
              <div v-if="orderDetails.deliveryCompany == orderDetails.deliveryCompany">{{ orderDetails.deliveryCompany }}</div>
            </div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">
              <div v-if="orderDetails.deliverySn == ''">暂无</div>
              <div v-if="orderDetails.deliverySn == null">暂无</div>
              <div v-if="orderDetails.deliverySn == orderDetails.deliverySn">{{ orderDetails.deliverySn }}</div>
            </div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">{{ orderDetails.autoConfirmDay }}天</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">{{ orderDetails.integration }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">{{ orderDetails.integration }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-4">
              <span data-v-dbd3fea4=""
                ><div role="tooltip" id="el-popover-4106" aria-hidden="true" class="el-popover el-popper el-popover--plain" tabindex="0" style="width: 200px; display: none">
                  <div class="el-popover__title">活动信息</div>
                  单品促销,打折优惠：满3件，打7.50折,满减优惠：满1000.00元，减120.00元,满减优惠：满1000.00元，减120.00元,无优惠
                </div>
                <span data-v-dbd3fea4="" class="el-popover__reference" aria-describedby="el-popover-4106" tabindex="0">{{ orderDetails.promotionInfo }}</span></span
              >
            </div>
          </div>
        </div>
        <div style="margin-top: 20px">
          <i class="el-icon-s-claim"></i>
          <span>收货人信息</span>
        </div>
        <div class="table-layout">
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">收货人</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">手机号码</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">邮政编码</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">收货地址</div>
          </div>
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">{{ orderDetails.receiverName }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">{{ orderDetails.receiverPhone }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">{{ orderDetails.receiverPostCode }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">
              {{ orderDetails.receiverProvince + orderDetails.receiverCity + orderDetails.receiverRegion + orderDetails.receiverDetailAddress }}
            </div>
          </div>
        </div>
        <div style="margin-top: 20px">
          <i class="el-icon-s-claim"></i>
          <span>商品信息</span>
        </div>
        <div style="margin-top: 20px">
          <el-table :data="orderDetails.orderItemList" border style="width: 100%">
            <el-table-column label="商品图片" width="120px" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.productPic" alt="" style="width: 80px" />
              </template>
            </el-table-column>
            <el-table-column label="商品名称" width="580px" align="center">
              <template slot-scope="scope">
                <div>
                  <p>{{ scope.row.productName }}</p>
                  <p>品牌：{{ scope.row.productBrand }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="价格/货号" width="120px" align="center">
              <template slot-scope="scope">
                <div>
                  <p>价格:￥{{ scope.row.productPrice }}</p>
                  <p>货号:{{ scope.row.productSn }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="属性" width="120px" align="center">
              <template slot-scope="scope">
                <div>
                  {{ JSON.parse(scope.row.productAttr)[0].key }}: {{ JSON.parse(scope.row.productAttr)[0].value }}; {{ JSON.parse(scope.row.productAttr)[1].key }}:
                  {{ JSON.parse(scope.row.productAttr)[1].value }};
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量" width="120px" align="center">
              <template slot-scope="scope">
                {{ scope.row.productQuantity }}
              </template>
            </el-table-column>
            <el-table-column label="小计" width="121px" align="center">
              <template slot-scope="scope">
                <p>￥{{ scope.row.productPrice }}</p>
              </template>
            </el-table-column>
          </el-table>
          <div data-v-dbd3fea4="" style="float: right; margin: 20px">
            合计：<span data-v-dbd3fea4="" class="color-danger">￥{{ orderDetails.totalAmount }}</span>
          </div>
        </div>
        <div style="margin-top: 60px">
          <i class="el-icon-s-claim"></i>
          <span>费用信息</span>
        </div>
        <div data-v-dbd3fea4="" class="table-layout">
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">商品合计</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">运费</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">优惠券</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">积分抵扣</div>
          </div>
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">￥{{ orderDetails.totalAmount }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">￥{{ orderDetails.freightAmount }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">-￥{{ orderDetails.couponAmount }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">-￥{{ orderDetails.integrationAmount }}</div>
          </div>
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">活动优惠</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">折扣金额</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">订单总金额</div>
            <div data-v-dbd3fea4="" class="table-cell-title el-col el-col-6">应付款金额</div>
          </div>
          <div data-v-dbd3fea4="" class="el-row">
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">-￥{{ orderDetails.promotionAmount }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">-￥{{ orderDetails.couponAmount }}</div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">
              <span data-v-dbd3fea4="" class="color-danger">￥{{ orderDetails.totalAmount }}</span>
            </div>
            <div data-v-dbd3fea4="" class="table-cell el-col el-col-6">
              <span data-v-dbd3fea4="" class="color-danger">￥{{ orderDetails.payAmount }}</span>
            </div>
          </div>
        </div>
        <div style="margin-top: 20px">
          <i class="el-icon-s-claim"></i>
          <span>操作信息</span>
        </div>
        <div style="margin-top: 20px">
          <el-table :data="orderDetails.historyList" border style="width: 100%">
            <el-table-column label="操作者" width="120px" align="center">
              <template slot-scope="scope">
                {{ scope.row.operateMan }}
              </template>
            </el-table-column>
            <el-table-column label="操作时间" width="160px" align="center">
              <template slot-scope="scope">
                {{ orderTime(scope.row.createTime) }}
              </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.orderStatus == 0">待付款</div>
                <div v-if="scope.row.orderStatus == 1">待发货</div>
                <div v-if="scope.row.orderStatus == 2">已发货</div>
                <div v-if="scope.row.orderStatus == 3">已完成</div>
                <div v-if="scope.row.orderStatus == 4">已关闭</div>
                <div v-if="scope.row.orderStatus == 5">无效订单</div>
              </template>
            </el-table-column>
            <el-table-column label="付款状态" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.orderStatus == 2">已支付</div>
                <div v-if="scope.row.orderStatus == 4">已退款</div>
              </template>
            </el-table-column>
            <el-table-column label="发货状态" align="center"> 已发货 </el-table-column>
            <el-table-column label="备注" width="655px" align="center">
              <template slot-scope="scope">
                {{ scope.row.note }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchOrderDetails, mkfsTime } from '@/api/api'

export default {
  data() {
    return {
      orderDetails: [],
    }
  },
  methods: {
    orderTime(time) {
      return mkfsTime(time)
    },
  },
  created() {
    let ids = this.$route.query.id
    fetchOrderDetails(ids).then((res) => {
      console.log(res.data)
      this.orderDetails = res.data
    })
    this.orderTime
  },
}
</script>

<style lang="scss">
.table-cell[data-v-dbd3fea4] {
  height: 60px;
  line-height: 40px;
  color: #606266;
  overflow: hidden;
}
.table-cell[data-v-dbd3fea4] {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}
.el-row {
  box-sizing: border-box;
}
.table-cell-title[data-v-dbd3fea4] {
  background: #f2f6fc;
  color: #303133;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}
.el-col-4 {
  width: 16.66667%;
}
.detail-container {
  width: 80%;
  padding: 20px;
  margin: 20px auto;
}
.color-danger {
  color: #f56c6c;
  font-size: 14px;
}
.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}
.operate-button-container {
  float: right;
  margin-right: 20px;
}
.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}
</style>
